<template>
    <div class="box">
        <el-row >
            <el-col :span="13">
                <blockquote>对于普通的大小标题，使用 echarts 自带的就挺好</blockquote>
                <sea-charts :options="options1" style="overflow: hidden; height: 400px">
                </sea-charts>
            </el-col>

            <el-col :span="11">
            <textarea class="textarea code smart-block" rows="20"
                      :value="code1"></textarea>
            </el-col>

            <el-col :span="13">
                <blockquote>对于其它方向上的标题，适配不是很好，直接使用布局实现会更好</blockquote>
                <sea-charts :options="options2" style="overflow: hidden; height: 400px">
                </sea-charts>
            </el-col>


            <el-col :span="11">
            <textarea class="textarea code smart-block" rows="16"
                      :value="JSON.stringify(options2, null, 4)"></textarea>
            </el-col>

        </el-row>
    </div>
</template>

<script setup lang="ts">

import Layers from "@/lang/layers";

const {name, age} = Layers.getFieldValues([{name: 1, age: 18}, {name: 1, age: 19}], 'name', 'age');

const code1 = `
return {
    // 新增标题配置
    title: {
        text: 'Weekly Sales Data',  // 主标题文本
        subtext: '2023年统计',      // 副标题（可选）
        left: 'center',            // 水平居中
        top: 10,                   // 距离顶部的距离（像素）
        textStyle: {
            color: '#333',           // 标题颜色
            fontSize: 16,            // 标题字体大小
            fontWeight: 'bold'       // 加粗
        },
        subtextStyle: {
            color: '#999',           // 副标题颜色
            fontSize: 12             // 副标题字体大小
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: 16,
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};
`;
const options1: echarts.EChartsOption = new Function(code1)();

Layers.groupByField()

const code2 = `
return {
    // 新增标题配置
    title: {
        text: '左侧垂直标题'.split('').join('\\n'), // 每个字符换行
        subtext: '2023年统计'.split('').join('\\n'),      // 副标题（可选）
        left: 'left',            // 水平居中
        top: 'center',     // 垂直居中
        textStyle: {
            color: '#333',           // 标题颜色
            fontSize: 16,            // 标题字体大小
            fontWeight: 'bold'       // 加粗
        },
        subtextStyle: {
            color: '#999',           // 副标题颜色
            fontSize: 12             // 副标题字体大小
        },
        padding: [10, 0, 0, 10] // 调整内边距（上、右、下、左）
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: 16,
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
}
`
const options2: echarts.EChartsOption = new Function(code2)();
</script>

